<template>
	<view class='details'>

		<!--商品图-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class='swiper-img' :src="goodsContent.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!--价格和名称-->
		<view class='details-goods'>
			<view class='goods-pprice'>¥{{goodsContent.pprice}}</view>
			<view class='goods-oprice'>¥{{goodsContent.oprice}}</view>
			<view class='goods-name'>{{goodsContent.name}}</view>
		</view>

		<!--商品详情图-->
		<view>
			<view>
				<image class='details-img' src="../../static/img/detail1.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/detail2.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/detail3.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/detail4.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/detail5.jpg" mode=""></image>
			</view>
		</view>
		<!--商品列表-->
		<Card cardTitle='看了又看'></Card>
		<CommodityList :dataList='dataList'></CommodityList>
		
		<!--底部-->
		<view class='details-foot'>
			<view class='iconfont icon-xiaoxi'></view>
			<view class='iconfont icon-gouwuche' @tap='goShopCart'></view>
			<view class='add-shopcart' @tap='showPop'>加入购物车</view>
			<view class='purchase' @tap='showPop'>立即购买</view>
		</view>
		
		<!--底部弹出层-->
		<view class="pop" v-show='isShow' @touchmove.stop.prevent=''>
			<!--蒙层-->
			<view class='pop-mask' @tap='hidePop'></view>
			<!--内容块-->
			<view class='pop-box' :animation="animationData">
				<view>
					<image class='pop-img' :src="goodsContent.imgUrl" mode=""></image>
				</view>
				<view class='pop-num'>
					<view>购买数量</view>
					<uni-number-box :min="1" :value="num"  />				
				</view>
				<view class='pop-sub' @tap='addCart'>
					确定
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	export default {
		components: {
			Card,
			CommodityList,
		},
		data() {
			return {
				isShow:false,
				goodsContent:{},
				animationData:{},
				num:1,
				goodsContent: {
					id:1,
					imgUrl: '../../static/img/detail1.jpg',
					pprice: '399',
					oprice: '699',
					name: 'HLA/海澜之家商务POLO衫24夏新款弹力翻领爸爸短袖T',
				},

				dataList: [{
						id: 1,
						imgUrl: "../../static/img/commodity1.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 2,
						imgUrl: "../../static/img/commodity2.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
				],

			}
		},
		
		onLoad(e) {
			// console.log(e);
			this.getData(e.id);
		},
		
		//点击分享
		onNavigationBarButtonTap(e) {
			console.log(e.type);
			if(e.type==='share'){
				uni.share({
					"provider":"weixin",
					"type":0,
					"scene":"WXSceneSession",
					"title":this.goodsContent.name,
					"href":"http://localhost:3000/pages/details/details?id="+this.goodsContent.id+"",
					imageUrl:this.goodsContent.imgUrl,
					success: function (res) {
						uni.showTabBar({
							title:"分享成功"
						})
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
					
				})
			}
		},
		methods: {
			
			...mapMutations(['addShopCart']),
			
			// 加入购物车 / 立即购买
			showPop(){},
			
			//跳转-购物车
			goShopCart(){
				uni.switchTab({
					url:'../shopcart/shopcart'
				})
			},
			
			//加入购物车
			addCart(){
				let goods = this.goodsContent
				// console.log(goods);
				this.goodsContent['checked'] = false
				this.goodsContent['num'] = this.num
				//加入购物车
				this.addShopCart(goods)
				//隐藏弹出框
				this.hidePop()
				
				uni.showToast({
					title:'成功加入购物车',
					icon:'none'
				})
				// this.goShopCart()
			},
			
			//获取单个商品：
			getData(id){
				$http.request({
					url:"/goods/id",
					data:{
						id:id
					}
				}).then((res)=>{
					// console.log(res);
					this.goodsContent = res[0];
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			
			//显示蒙层：
			showPop(){
				var animation = uni.createAnimation({
				   duration: 200
				})
				animation.translateY(600).step();
				this.animationData = animation.export();
				
				this.isShow = true;
				setTimeout(()=>{
					animation.translateY(0).step();
					this.animationData = animation.export();
				},200)
			},
			
			//隐藏蒙层：
			hidePop(){
				var animation = uni.createAnimation({
				   duration: 200
				})
				animation.translateY(600).step();
				this.animationData = animation.export();
				this.isShow = true;
				setTimeout(()=>{
					animation.translateY(0).step();
					this.isShow = false;
				},200)
			},

		},
		
	}
</script>

<style scoped>
	.details {
		padding-bottom: 90rpx;
	}

	swiper {
		width: 100%;
		height: 700rpx;
	}

	.swiper-img {
		width: 100%;
		height: 700rpx;
	}

	.details-goods {
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		padding: 10rpx 0;
	}

	.details-img {
		width: 100%;
	}

	.details-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}

	.details-foot .iconfont {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100%;
		background-color: #000000;
		color: #FFFFFF;
		text-align: center;
		margin: 0 10rpx;
		line-height: 30px;
		font-size: 20px;
	}
	
	.add-shopcart {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: #000000;
		color: #FFFFFF;
		border-radius: 40rpx;
		transform: translatex(24%);
	}
	
	.purchase{
		margin:0 40rpx;
		padding:6rpx 30rpx;
		background-color: #49BDFB;
		color:#FFFFFF;
		border-radius: 40rpx;
		transform: translatex(10%);
	}
	.pop{
		position: fixed;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}
	.pop-mask{
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
	}
	.pop-box{
		position: absolute;
		left:0;
		bottom:0;
		width: 100%;
		background-color: #FFFFFF;
	}
	.pop-img{
		width: 260rpx;
		height: 260rpx;
	}
	.pop-num{
		padding:20rpx;
		display: flex;
		justify-content: space-between;
	}
	.pop-sub{
		line-height: 80rpx;
		background-color: #49BDFB;
		color:#FFFFFF;
		text-align: center;
	}

	
</style>